import React from "react";
import styles from "@/assets/css/email.module.css";
import type  business  from "@/typeof/type";
import TabBar from '@/components/TabBar';

type EmaValues = {
    email: string;
    code: string;
}

const email = () => {
    const [ form ] = React.UI.Form.useForm();

    const [ business ] = useState<business>(React.business);

    // 检查是否添加了邮箱信息
    useEffect(() => {
        if (!business.email) {
            React.fail('请先绑定邮箱', () => {
                React.navigate('/business');
            })
        }
    }, [business.email])

    // 检查是否已经验证
    useEffect(() => {
        if (business.auth == '1') {
            React.fail('您已验证,无须重复验证', () => {
                React.navigate('/business');
            })
        }
    }, [business.auth])

    const OnSubmit = async (value:EmaValues) => {
        // 组装参数
        const params = {
            ...value,
            busid: business.id
        };
        // 发送请求
        const result = await React.Http.post('/business/email',params);
        // 处理请求结果
        if (result.code === 1) {
            React.success(result.msg, () => {
                // 返回上一页
                React.navigate(-1);
            });
        } else {
            React.fail(result.msg);
            // 清空表单
            form.setFieldValue('code', '');
        }
    }

    const OnSend = async () => {
        // 组装数据
        const params = {
            email: business.email,
            busid: business.id
        }
        // 发送请求
        const result = await React.Http.post('/business/send', params);
        // 处理请求结果
        if(result.code === 1){
            React.success(result.msg);
        }else{
            React.fail(result.msg);
        }
    }

    return(
        <>
            <React.UI.Form
                form={form}
                onFinish={OnSubmit}
                layout="horizontal"
                footer={
                    <React.UI.Button
                        block
                        type="submit"
                        color="primary"
                        size="large"
                    >
                        提交
                    </React.UI.Button>
                    }
            >
                <React.UI.Form layout='horizontal'>
                    <React.UI.Form.Item initialValue={business.email ?? ''} label='邮箱' name='email'>
                        <React.UI.Input  disabled />
                    </React.UI.Form.Item>
                    <React.UI.Form 
                        layout='horizontal'
                    >
                        <React.UI.Form.Item
                            label='邮箱验证码'
                            extra={
                            <div className={styles.extraPart}>
                                <React.UI.Button
                                    color="primary"
                                    size="small"
                                    onClick={OnSend}
                                >
                                    发送验证码
                                </React.UI.Button>
                            </div>
                            }
                        >
                            <React.UI.Input placeholder='请输入验证码' clearable />
                        </React.UI.Form.Item>
                    </React.UI.Form>
                </React.UI.Form>
            </React.UI.Form>
            <TabBar />
        </>
    )
}

export default email;